<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Myfuns</title>
<script src="../js/deBug.js" ></script>
<script src="../js/Myfuns.js" ></script>
<script src="../js/tab.js" ></script>
<link href="../css/reset.css" rel="stylesheet" type="text/css"  />
<style>
	.ts , dl{
		border:1px solid green;
		padding:5px;
	}
	
	dt , li {
		border:1px solid #3C0;
		padding:3px 5px;
	}
	
	.ts div , dd {
		border:1px solid red;
		padding:5px;
	}
	.selectOn{
		background:yellow;
	}
</style>
</head>

<body>

<dl id="tabOne">
	<dt id="tabOneTab1">tabs1</dt>
    <dd id="tabOneTab1Con">tabCon1
    	<div>哈哈</div>
    </dd>
    <dt id="tabOneTab2">tabs2</dt>
    <dd id="tabOneTab2Con">tabCon2</dd>
    <dt id="tabOneTab3">tabs3</dt>
    <dd id="tabOneTab3Con">tabCon3</dd>
    <dt id="tabOneTab4">tabs4</dt>
    <dd id="tabOneTab4Con">tabCon4</dd>
	<dt id="tabOneTab5">tabs5</dt>
    <dd id="tabOneTab5Con">tabCon5</dd>
	<dt id="tabOneTab6">tabs6</dt>
    <dd id="tabOneTab6Con">tabCon6</dd>
	<dt id="tabOneTab7">tabs7</dt>
    <dd id="tabOneTab7Con">tabCon7</dd>
	<dt id="tabOneTab8">tabs8</dt>
    <dd id="tabOneTab8Con">tabCon8</dd>
	<dt id="tabOneTab9">tabs9</dt>
    <dd id="tabOneTab9Con">tabCon9</dd>
	<dt id="tabOneTab10">tabs10</dt>
    <dd id="tabOneTab10Con">tabCon10</dd>
	<dt id="tabOneTab11">tabs11</dt>
    <dd id="tabOneTab11Con">tabCon11</dd>
	<dt id="tabOneTab12">tabs12</dt>
    <dd id="tabOneTab12Con">tabCon12</dd>
</dl>
<div style="height:100px;">
<input type=button value="给tabone添加标签页" onclick="javascript:tabs('tabOne').add()" />
<input type=button value="给tabTwo添加标签页" onclick="javascript:tabs('tabTwo').add()" />
</div>

<div id="tabTwo" class="ts">
	<ul>
    	<li id="tabTwoTab1">tabs1</li>
        <li id="tabTwoTab2">tabs2</li>
        <li id="tabTwoTab3">tabs3</li>
        <li id="tabTwoTab4">tabs4</li>
    </ul>
    <div>
    	<div id="tabTwoTab1Con">tabCon1</div>
        <div id="tabTwoTab2Con">tabCon2</div>
        <div id="tabTwoTab3Con">tabCon3</div>
        <div id="tabTwoTab4Con">tabCon4</div>
    </div>
</div>

<div id="tsTab2Three" class="ts">
	<ul>
    	<li id="tsTab2ThreeTab1">tabs1</li>
        <li id="tsTab2ThreeTab2">tabs2</li>
        <li id="tsTab2ThreeTab3">tabs3</li>
        <li id="tsTab2ThreeTab4">tabs4</li>
    </ul>
    <div>
    	<div id="tsTab2ThreeTab1Con">tabCon1</div>
        <div id="tsTab2ThreeTab2Con">tabCon2</div>
        <div id="tsTab2ThreeTab3Con">tabCon3</div>
        <div id="tsTab2ThreeTab4Con">tabCon4</div>
    </div>
</div>

</body>

<script>

TabClass("tabOne" , "3" , "mouseover")
TabClass("tabTwo")
TabClass("tsTab2Three")




</script>
</html>
